1 00:00:00,660 --> 00:00:01,260 Okay. 2 00:00:01,260 --> 00:00:05,550 The next section in our GUI that we can script is the spectating system. 3 00:00:05,550 --> 00:00:10,440 When a player presses the spectate button, I want to move their camera to follow in a live player on 4 00:00:10,440 --> 00:00:14,640 the map and then give them some buttons to spectate different players. 5 00:00:14,640 --> 00:00:19,770 So inside of our spectate frame, if we enable visibility for this, we're going to give them two different 6 00:00:19,770 --> 00:00:20,400 buttons. 7 00:00:20,400 --> 00:00:23,070 It's going to tell them who they are currently spectating. 8 00:00:23,070 --> 00:00:25,950 And then when they want to stop spectating, they can hit this button. 9 00:00:25,950 --> 00:00:30,330 And then we'll reset their camera to go back rotating around the map again, and we'll put the main 10 00:00:30,330 --> 00:00:32,880 menu back onto their screen. 11 00:00:32,880 --> 00:00:38,400 Since this spectating system is going to be entirely client sided, we only need to script it within 12 00:00:38,400 --> 00:00:41,430 the local script responsible for our starting menu. 13 00:00:41,430 --> 00:00:46,560 So let me go ahead and disable UI visibility and we can open up our starting menu handler. 14 00:00:47,680 --> 00:00:52,930 And then we can go ahead and do is we can go down into our handler section and we'll create another 15 00:00:52,930 --> 00:00:55,960 scope specifically for our spectating system. 16 00:00:55,960 --> 00:00:59,800 Here we can listen to when our spectate button is activated. 17 00:01:00,520 --> 00:01:08,860 And this is where we will move the player's camera onto another character who is on the map on the alive 18 00:01:08,890 --> 00:01:12,820 team, and we'll make sure to stop rotating their camera around the map. 19 00:01:12,850 --> 00:01:17,650 Otherwise, if there is no alive players on the map, then we'll just tell them that we can't spectate 20 00:01:17,650 --> 00:01:22,660 any players and we'll display that message on the button, just like we did for when the players try 21 00:01:22,660 --> 00:01:27,550 to play the game, but they aren't allowed to spawn in yet, so we should create a debounce for this 22 00:01:27,550 --> 00:01:29,950 button to prevent players from spam clicking it. 23 00:01:29,950 --> 00:01:33,700 So up here we'll create a small section for spectating. 24 00:01:34,980 --> 00:01:35,940 And I'll create a variable. 25 00:01:35,940 --> 00:01:38,850 I'll call this my spectate Debounce set that equal to false. 26 00:01:38,850 --> 00:01:43,230 And then I also want to have a variable to keep track of what player we're currently viewing, because 27 00:01:43,230 --> 00:01:48,690 the plan is to get all of the alive players from the alive team and store them in an array. 28 00:01:48,690 --> 00:01:53,670 And then when we press the either the left or right button, we're going to increment or decrement a 29 00:01:53,670 --> 00:01:56,880 number value to move to the next player inside of the array. 30 00:01:56,880 --> 00:02:01,860 So we could call this viewing player, and by default we'll set it to the value of one. 31 00:02:03,060 --> 00:02:06,960 We're also going to want to grab the camera because we're going to have to manipulate it as well. 32 00:02:06,960 --> 00:02:09,060 So we'll get the current camera in the workspace. 33 00:02:10,020 --> 00:02:15,720 And then in order to grab all of the players that are alive in our game, let's go ahead and get the 34 00:02:15,720 --> 00:02:16,950 team service. 35 00:02:18,380 --> 00:02:23,030 And then I want to create a dedicated function for grabbing all of the players that are currently alive. 36 00:02:23,030 --> 00:02:28,550 So we'll call it Get Alive players, and we'll simply return from the alive team. 37 00:02:28,550 --> 00:02:30,950 All the players that are alive. 38 00:02:32,140 --> 00:02:34,990 And we can go ahead and go down here. 39 00:02:34,990 --> 00:02:39,490 When the spectate button is activated, we'll set spectate debounce equal to true. 40 00:02:40,080 --> 00:02:43,500 And then at the top we'll check to see if spectate debounce is already true. 41 00:02:43,500 --> 00:02:44,880 If it is, we'll return. 42 00:02:45,240 --> 00:02:49,290 Otherwise, what we need to do is we need to get all of the alive players in our game. 43 00:02:49,290 --> 00:02:52,290 So we'll call our Get Alive players function. 44 00:02:52,290 --> 00:02:57,630 And if the number of alive players is greater than zero, then we can go ahead and start spectating. 45 00:02:58,400 --> 00:03:04,130 Otherwise, if there are no live players, then what we can do is we can update the text inside of our 46 00:03:04,130 --> 00:03:08,660 spectate button and say something like no players. 47 00:03:09,470 --> 00:03:10,700 To spectate. 48 00:03:10,700 --> 00:03:15,980 And then we'll display that for like three seconds, and then we'll reset the text back to the original. 49 00:03:15,980 --> 00:03:18,920 So I'll make a variable, call it original text. 50 00:03:18,920 --> 00:03:22,640 And that's equal to spectate button dot text. 51 00:03:22,640 --> 00:03:24,860 And then we can set spectate button. 52 00:03:25,640 --> 00:03:27,800 Dot text back to the original text. 53 00:03:28,360 --> 00:03:32,470 And then down here we'll set spectate the bounce back to false. 54 00:03:33,300 --> 00:03:38,370 But if there are enough players to spectate, then what we can go ahead and do is we'll make sure that 55 00:03:38,370 --> 00:03:40,590 the viewing player variable is set to one. 56 00:03:41,040 --> 00:03:43,320 We're going to enable our spectate frame. 57 00:03:43,320 --> 00:03:45,240 So we'll set visibility equal to true. 58 00:03:45,270 --> 00:03:47,700 We want to disable the main guy. 59 00:03:47,730 --> 00:03:50,490 So we'll set boiler image dot visibility equal to false. 60 00:03:50,820 --> 00:03:53,400 And then we want the camera to stop rotating around the map. 61 00:03:53,400 --> 00:03:55,560 So we need to use our camera event. 62 00:03:55,800 --> 00:03:57,870 So I believe it was called what. 63 00:03:57,870 --> 00:03:58,530 Rotate. 64 00:03:58,530 --> 00:03:58,740 Yeah. 65 00:03:58,740 --> 00:03:59,730 Rotate camera event. 66 00:03:59,730 --> 00:04:05,100 We're going to fire and pass false to let it know to stop rotating our camera around the map. 67 00:04:05,220 --> 00:04:10,950 And now what we can do is inside of the camera, we can go ahead and update the camera subject property 68 00:04:10,950 --> 00:04:14,790 and pass the humanoid of the player we want to spectate. 69 00:04:14,790 --> 00:04:18,000 So that's going to be equal to and inside of our live players. 70 00:04:18,000 --> 00:04:21,750 We're going to get the current player at the viewing player index. 71 00:04:22,050 --> 00:04:25,530 We're going to refer to their character and then get their humanoid. 72 00:04:25,530 --> 00:04:28,440 And now that's going to be the subject of our camera. 73 00:04:29,390 --> 00:04:33,980 And then we also need to make sure to update the text inside of our spectate frame to tell us what player 74 00:04:33,980 --> 00:04:35,060 we're currently spectating. 75 00:04:35,060 --> 00:04:39,680 So inside of the spectate frame, we have a text label in there called name for player. 76 00:04:39,680 --> 00:04:42,830 And we're going to update that text equal to this player's name. 77 00:04:42,830 --> 00:04:46,820 So we'll just copy this, paste that there and get the name of the player. 78 00:04:47,690 --> 00:04:52,790 Now that we've done that, we need to go ahead and listen to when those two buttons inside of the spectate 79 00:04:52,790 --> 00:04:54,410 frame are triggered. 80 00:04:54,410 --> 00:04:58,370 So we have to listen to when the player wants to move to the next player to spectate, or the previous, 81 00:04:58,370 --> 00:05:01,400 as well as when they press the stop spectating button. 82 00:05:01,730 --> 00:05:07,040 So what we can go ahead and do is we can go ahead and listen to, for example, in our spectate frame 83 00:05:07,040 --> 00:05:08,930 when the stop button is pressed. 84 00:05:08,930 --> 00:05:10,460 So when that is activated. 85 00:05:11,030 --> 00:05:16,760 What we want to do is we want to disable the spectating frame, set the visibility equal to false. 86 00:05:16,760 --> 00:05:21,890 We want to re-enable the main menu, set the visibility equal to true, and then we want our camera 87 00:05:21,890 --> 00:05:23,600 to start rotating around the map again. 88 00:05:23,600 --> 00:05:29,270 So we're going to use our rotate camera event and fire and say hey start rotating our camera around 89 00:05:29,270 --> 00:05:30,050 the map again. 90 00:05:31,420 --> 00:05:35,110 We also want to listen inside of our spectate frame for the next button. 91 00:05:35,630 --> 00:05:39,320 So next activated we'll connect a function to that. 92 00:05:39,320 --> 00:05:43,880 And then we also want to listen to the spectate frame dot previous button. 93 00:05:43,880 --> 00:05:46,400 When that is activated we'll connect a function to that. 94 00:05:47,330 --> 00:05:52,370 And when we want to move to the next player, we're going to set viewing player plus equal to one. 95 00:05:52,940 --> 00:05:56,240 And then we want to get the current alive players. 96 00:05:56,240 --> 00:05:58,880 So we'll call get alive players. 97 00:05:59,910 --> 00:06:06,210 And if we incremented this value to be greater than how many players are alive on the map. 98 00:06:06,210 --> 00:06:13,710 So if the viewing player is, let's say, greater than the number of alive players, then we want to 99 00:06:13,710 --> 00:06:16,560 reset viewing player back to one. 100 00:06:17,190 --> 00:06:21,780 However, we also want to confirm that there are still alive players on the map when they press the 101 00:06:21,780 --> 00:06:23,370 next or increment button. 102 00:06:23,370 --> 00:06:28,770 So if the number of alive players is equal to zero, then we don't want to do anything at all. 103 00:06:28,770 --> 00:06:29,820 We'll just return. 104 00:06:31,310 --> 00:06:37,190 And then what we can go ahead and do is simply update the camera's camera subject, and we'll just basically 105 00:06:37,190 --> 00:06:40,520 copy what we did up here and just paste it right here. 106 00:06:41,070 --> 00:06:44,880 And then we can copy all of this code and do the exact same thing in the previous button. 107 00:06:44,880 --> 00:06:48,990 We'll paste it here, but this time we want to decrement our viewing player by one. 108 00:06:49,940 --> 00:06:57,350 And then we want to check if the viewing player value becomes less than the value of one. 109 00:06:57,350 --> 00:07:04,100 And if it does, then we want to set the value to the highest value, which is the number of alive players 110 00:07:04,100 --> 00:07:04,610 on the map. 111 00:07:04,610 --> 00:07:06,140 So that way we have a loop. 112 00:07:06,140 --> 00:07:11,270 So if the player keeps spam clicking the next button, it's going to allow them to go in a loop. 113 00:07:11,270 --> 00:07:15,410 And if they keep spam clicking the previous button, it will allow them to go in a loop. 114 00:07:16,520 --> 00:07:18,140 And I believe that's all we need to do. 115 00:07:18,140 --> 00:07:23,150 So to test it out, we can go ahead and create a two player server and see if we can spectate other 116 00:07:23,150 --> 00:07:23,870 players. 117 00:07:24,900 --> 00:07:25,650 Okay here. 118 00:07:25,650 --> 00:07:29,970 I have my two players in my game and if I go and press the spectate button, it should tell me. 119 00:07:29,970 --> 00:07:30,510 There we go. 120 00:07:30,510 --> 00:07:33,930 No players to spectate on both of these players. 121 00:07:34,260 --> 00:07:39,330 Now, if one of them jumps into the map like this one, and then I try to spectate. 122 00:07:39,360 --> 00:07:44,220 As you can see now, it's allowing me to spectate this player and it says I'm spectating player one. 123 00:07:44,220 --> 00:07:50,400 If I hit stop spectating, it resets my camera and starts rotating around the map again and my main 124 00:07:50,400 --> 00:07:51,840 guy is visible again. 125 00:07:52,050 --> 00:07:55,440 If I go back and spectate, I can go ahead and hit these buttons. 126 00:07:55,440 --> 00:08:00,120 And since of course there are no other players that are on the live team, it's not doing anything. 127 00:08:00,120 --> 00:08:02,970 It's just setting it to the one player that's on the map. 128 00:08:02,970 --> 00:08:06,180 But as you can see, our spectating system is working fine. 129 00:08:06,180 --> 00:08:12,660 So our camera follows along where our player is walking, and we're also able to rotate our camera on 130 00:08:12,660 --> 00:08:16,770 this client to fully spectate this other player. 131 00:08:17,280 --> 00:08:20,760 And we can go ahead and watch this player kill these zombies on the map. 132 00:08:23,490 --> 00:08:25,740 Now let's say this player dies. 133 00:08:25,740 --> 00:08:27,780 Let me go ahead and have this zombie kill me. 134 00:08:32,570 --> 00:08:34,760 Hillbilly bang. 135 00:08:34,760 --> 00:08:36,560 These guys are doing a poor job at killing me. 136 00:08:37,580 --> 00:08:39,830 So once these guys kill me, there we go. 137 00:08:41,150 --> 00:08:43,310 As you can see, we're still spectating this player. 138 00:08:43,310 --> 00:08:46,910 But then their character disappears, and now our camera's just stuck here. 139 00:08:46,910 --> 00:08:49,670 And if we click these buttons, of course, nothing's going to happen. 140 00:08:49,670 --> 00:08:52,130 But that's why we have the stop spectating button. 141 00:08:52,130 --> 00:08:55,670 So we can go ahead and press this button and go back to the main menu. 142 00:08:55,670 --> 00:08:59,780 And if we try to spectate again, as you can see, there are no players to spectate. 143 00:09:01,360 --> 00:09:01,810 All right. 144 00:09:01,810 --> 00:09:07,360 And that is how we can implement a spectating system in our game where nearly complete with our project, 145 00:09:07,360 --> 00:09:08,890 we just have to do a few more things. 146 00:09:08,890 --> 00:09:11,200 So I'll see you in the next lecture.